<template>

    <el-main>
        <!-- 查询条件 -->
        <el-form ref="searchForm" label-width="80px" :inline="true" size="small">
          <el-form-item>
            <el-input v-model="searchModel.departmentName" placeholder="请输入部门名称"/>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="search()">查询</el-button>
            <el-button icon="el-icon-refresh-right">重置</el-button>
            <el-button type="success" icon="el-icon-plus" @click="openAddWindow()" v-if="hasPermission('sys:department:add')">新增</el-button>
          </el-form-item>
        </el-form>
        <!-- 数据表格 -->
        <!--
            data属性:表格数据
            border属性:表格边框
            stripe属性;表格斑马线
            row-key属性:行数据的Key，用来优化 Table的渲染
            default-expand-all属性:默认展开树形表格数据
            tree-props属性：树形表格配置属性选型
        -->
        <el-table
        :data="tableData"
        style="width: 100%;margin-bottom: 20px;"
        row-key="id"
        border
        stripe
        default-expand-all
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
        <!-- prop属性：填写数据的属性名称 -->
        <!-- label属性：表格表头标题 -->
        <el-table-column prop="departmentName" label="部门名称"/>
        <el-table-column prop="parentName" label="所属部门"/>
        <el-table-column prop="phone" label="部门电话"/>
        <el-table-column prop="address" label="部门地址"/>
        <el-table-column label="操作" width="200" align="center">
              <template slot-scope="scope">
                  <el-button
                  icon="el-icon-edit-outline"
                  type="primary"
                  size="small"
                  @click="handleEdit(scope.row)"
                  v-if="hasPermission('sys:department:edit')"
                  >编辑
                  </el-button>
                  <el-button
                  icon="el-icon-close"
                  type="danger"
                  size="small"
                  @click="handleDelete(scope.row)"
                  v-if="hasPermission('sys:department:delete')"
                  >删除
                  </el-button>
              </template>
        </el-table-column>
      </el-table>

      <!-- 添加修改窗口 -->
      <system-dialog
      :title="deptDialog.title"
      :visible="deptDialog.visible"
      :width="deptDialog.width"
      :height="deptDialog.height"
      @onClose="onClose()"
      @onConfirm="onConfirm()"
    >
      <div slot="content">
      <el-form
        :model="dept"
        ref="deptForm"
        :rules="rules"
        label-width="80px"
        :inline="true"
        size="small"
      >
        <el-form-item label="所属部门" prop="parentName">
        <el-input v-model="dept.parentName" :readonly="true" @click.native="openParentAddWindow()"></el-input>
        </el-form-item>
        <el-form-item label="部门名称" prop="departmentName">
        <el-input v-model="dept.departmentName"></el-input>
        </el-form-item>
        <el-form-item label="部门电话">
        <el-input v-model="dept.phone"></el-input>
        </el-form-item>
        <el-form-item label="部门地址">
        <el-input v-model="dept.address"></el-input>
        </el-form-item>
        <el-form-item label="序号">
        <el-input v-model="dept.orderNum"></el-input>
        </el-form-item>
      </el-form>
      </div>
    </system-dialog>

     <!-- 所属部门窗口 -->
    <system-dialog
      :title="parentDialog.title"
      :visible="parentDialog.visible"
      :width="parentDialog.width"
      :height="parentDialog.height"
      @onClose="onParentClose()"
      @onConfirm="onParentConfirm()"
    >
     
    <div slot="content">
        <el-tree ref="parentTree"
        :data="treeList" 
        node-key="id"
        :props="defaultProps" 
        empty-text="暂无数据" 
        :highlight-current="true"
        :default-expand-all="true"
        :expand-on-click-node="false"
        @node-click="handleNodeClick">
      
        <div class="customer-tree-node" slot-scope="{node,data}">
          <span v-if="data.children.length === 0">
            <i class="el-icon-document"></i>
          </span>
          <span v-else @click="openBtn(data)">
              <svg-icon v-if="data.open" icon-class="add-s"/>
              <svg-icon v-else icon-class="sub-s"/>
          </span>
        <span style="margin-left: 5px">{{ node.label }}</span>
    </div>

      
      </el-tree>
    </div>

  </system-dialog>

  </el-main>

</template>

<script>
import departmentApi from '@/api/system/department'
import SystemDialog from '@/components/system/Systemdialog'

    export default {
    name: "department",
    components:{
      SystemDialog
    },
    data(){
        return{
                searchModel :{
                    //部门名称
                    departmentName: '',
                },
                tableData: [],//表格数据

                deptDialog: {
                    title: "",      //窗口标题
                    visible: false, //是否显示窗口
                    width:560,      //窗口宽度
                    height: 170,    //窗口高度们

              },

                dept:{
                    id: "",             //部门编号
                    departmentName:"",  //部门名称
                    pid: "",            //所属部门id
                    parentName:"",      //所属部门名称
                    phone: " ",         //电话
                    address : "",       //地址
                    orderNum: "",       //序号
              },
              // 选择所属部门的窗口属性
              parentDialog: {
                    title: "所属部门",      //窗口标题
                    visible: false, //是否显示窗口
                    width:300,      //窗口宽度
                    height: 400,    //窗口高度们

              },
               //表单验证规则
               rules: {
                  parentName: [{required: true,message:"请选择所属部门", trigger:"change"}],
                  departmentName: [{required: true, message:"请输入部门名称" ,trigger: "blur"}]
              },

              treeList: [],        //树形数据
              //树形组件默认属性值
              defaultProps: {
              children :"children" ,
              label: "departmentName",
            
              },

        }
      },
    created(){
      this.search()
    },      
    methods:{
        //查询部门列表
        async search(){
            //发送查询请求
            let res = await departmentApi.getDepartmentList(this.searchModel);
            //判断是否成功

            console.log(res.data)
            if(res.success){
                this.tableData = res.data;
                }
            },

            
        /*打开添加窗口*/
        openAddWindow(){

            //清空表单数据
            this.$resetForm("deptForm", this.dept);
            //设置窗口属性
            this.deptDialog.title="新增部门";
            this.deptDialog.visible=true;
        },

        /*窗口关闭事件*/
        onClose(){
          this.deptDialog.visible=false;
        },
         /*窗口确认事件*/
         onConfirm(){
            //表单验证
            this.$refs.deptForm.validate( async (valid) => {
            //如果验证通过
            if (valid) {
              let res = null;//后端返回的数据
              //判断部门ID是否有数据，如果部门ID为空，则表示新增，否则就是修改
              if(this.dept.id===''){//新增
                //发送新增请求
                res = await departmentApi.addDept(this.dept);
              }else{
                //发送修改请求
                res = await departmentApi.updateDept(this.dept);
              }
              //判断是否成功
              if (res.success) {
                  this.$message.success(res.message);
                  //刷新
                  this.search();
                  //关闭窗口
                  this.deptDialog.visible = false;
              } else {
                  this.$message.error(res.message);
              }
            }
            });
        },

          /*打开所属部门窗口*/
          async openParentAddWindow(){
          //设置窗口属性
          this.parentDialog.visible = true;
          //查询所属部门列表
          let res = await departmentApi.getParentTreeList();
          //判断是否成功
          if (res.success){
              this.treeList = res.data;
            }
        },
         /*所属部门窗口关闭事件*/
         onParentClose(){
          this.parentDialog.visible=false;
        },
         /*所属部门窗口确认事件*/
         onParentConfirm(){
          this.parentDialog.visible=false;
        },
        // 树节点点击事件
        handleNodeClick(data){
          //当点击树节点时，赋予选中的值
          this.dept.pid = data.id;
          this.dept.parentName = data.departmentName;

        },
        /**点击树节点+-号折叠展开事件 */
        openBtn(data) {
        //修改折叠展开状态
        console.log(data)
        data.open = !data.open;
        this.$refs.parentTree.store.nodesMap[data.id].expanded = !data.open;
      },

        /**
        * 编辑部门
        * @param row
        */
        handleEdit(row) {
          //数据回显
          this.$objCopy(row, this.dept);
          //设置窗口标题
          this.deptDialog.title = "编辑部门";
          //显示编辑部门窗口
          this.deptDialog.visible = true;
        },

       /**
        * 删除部门
        */
        async handleDelete(row) {
        //查询部门下是否存在子部门或用户
        let result = await departmentApi.checkDepartment({ id: row.id });
        //判断是否可以删除
        if (!result.code === 800) {
            //提示不能删除
            this.$message.warning(result.message);
        } else {
            //确认是否删除
            let confirm = await this.$sconfirm("确定要删除该数据吗?");
            if (confirm) {
                //发送删除请求
                let res = await departmentApi.deleteById({ id: row.id });
                //判断是否成功
                if (res.success) {
                    //成功提示
                    this.$message.success(res.message);
                    //刷新
                    this.search();
                } else {
                    //失败提示
                    this.$message.error(res.message);
                }
            }
        }
      },
  
      }
    }
</script>

<style lang="scss" scoped>
    ::v-deep .el-tree {
    .el-tree-node {
    position: relative;
    padding-left: 10px;
    }
    .el-tree-node__children {
    padding-left: 20px;
    }
    .el-tree-node :last-child:before {
    height: 40px;
    }
    .el-tree > .el-tree-node:before {
    border-left: none;
    }
    .el-tree > .el-tree-node:after {
    border-top: none;
    }
    .el-tree-node:before,
    .el-tree-node:after {
    content: "";
    left: -4px;
    position: absolute;
    right: auto;
    border-width: 1px;
    }
    .tree :first-child .el-tree-node:before {
    border-left: none;
    }
    .el-tree-node:before {
    border-left: 1px dotted #d9d9d9;
    bottom: 0px;
    height: 100%;
    top: -25px;
    width: 1px;
    }
    .el-tree-node:after {
    border-top: 1px dotted #d9d9d9;
    height: 20px;
    top: 14px;
    width: 24px;
    }
    .el-tree-node__expand-icon.is-leaf {
    width: 8px;
    }
    .el-tree-node__content > .el-tree-node__expand-icon {
    display: none;
    }
    .el-tree-node__content {
    line-height: 30px;
    height: 30px;
    padding-left: 10px !important;
    }
    }
    ::v-deep .el-tree > div {
    &::before {
    display: none;
    }
    &::after {
    display: none;
    }
    }
</style>
